<template>
  <div style="width: 560px;margin: 0 auto">
    <!--分类-->
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item
        :index="val.uid" v-for="(val,index) in category_data"
        :key="val.id">{{ val.category }}
      </el-menu-item>
    </el-menu>
    <!--    分页-->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        :page-sizes="[5, 8, 10, 20]"
        @current-change="handleCurrentChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="5"
        :total="totals">
      </el-pagination>
    </div>
    <!--  moves列表页  -->
    <el-card class="box-card" shadow="hover" v-for="(m_val,m_index) in moves_data" :key="m_val.id">
      <div class="text item">
        <div>序号：{{ m_val.category_uid }}</div>
        <div>名称：{{ m_val.title }}</div>
        <div>分类：{{ m_val.category_name }}</div>
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "FilterPage",
  data() {
    return {
      // 默认选中
      activeIndex2: '1',
      // 用来接受后端的数据
      category_data: [],
      moves_data: [],
      // 参数
      filter_dic: {},
      totals: 0,
    };
  },
  created() {
    // 一般在create里面进行异步请求
    this.get_category_data();
    this.get_moves();

  },
  methods: {
    // 跳转路由
    handleSelect(key, keyPath) {
      // key:index,keyPath:路径
      if (key === '1') {
        // uid===1为全部
        delete this.filter_dic['category']
        this.get_moves();
      } else {
        // 在字典中的封装数据
        this.filter_dic.category = key
        this.get_moves();
      }

    },
    // 定义获取分类的函数
    get_category_data() {
      // 发送请求
      this.$axios.get(`${this.$settings.host}/text/`, {
        params: {}  // 此参数必须是字典，第二种传参方式，类似于直接在路由上?username='xx'
      })
        .then((res) => {
          // 成功之后执行
          this.category_data = res.data
        }).catch((errors) => {
      })
    },

    // 获取moves
    get_moves() {
      // 发送请求
      this.$axios.get(`${this.$settings.host}/filter_text/`, {
        params: this.filter_dic  // 此参数必须是字典，第二种传参方式，类似于直接在路由上?username='xx'
      })
        .then((res) => {
          // 成功之后执行
          // this.moves_data = res.data
          // 现在的数据在data.results里面，必须进行修改，不然会报name...这个错
          this.moves_data = res.data.results
          // 总页码数
          this.totals = res.data.count
        }).catch((errors) => {
      })
    },
    // 点击页码触发函数
    handleCurrentChange(cpage) {
      // cpage:当前页码数
      this.filter_dic.page = cpage
      this.get_moves();
    },
    // 自定义展示数据
    handleSizeChange(size) {
      this.filter_dic.size = size
      this.get_moves();
    }
  }
}

</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>
